<svg viewBox='0 0 800 320' class='fm-chart'>
  <style type='text/css'>
  <![CDATA[
  .fm-chart text, .fm-tooltip {
    font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font: 10px sans-serif;
  }

  .fm-chart .axis .stroke {
    stroke: #aaa;
    stroke-width: 1px;
  }

  .fm-chart .axis .tick {
    stroke: #aaa;
    stroke-width: 1px;
  }

  .fm-chart .axis .label, .axis .title {
    fill: #666;
  }

  .fm-chart .axis .label {
    font-size: 10px;
  }

  .fm-chart .axis .title {
    font-size: 10px;
  }

  .fm-chart .chart-title {
    font-size: 12px;
    font-weight: bold;
  }

  .fm-chart .chart-subtitle {
    font-size: 10px;
  }

  .fm-chart text.label {
    fill: #666;
  }

  .fm-chart .legend text {
    font-size: 10px;
    fill: #333;
  }

  .fm-chart .legend text.title {
    fill: #666;
  }

  .fm-chart .line {
    fill: none;
    stroke: #000;
  }

  .fm-chart .area {
    opacity: 0.8;
  }

  .fm-chart .grid .gridline {
    stroke: #ddd;
    stroke-width: 0.02em;
  }

  .fm-chart .bar,
  .fm-chart .point,
  .fm-chart .area {
    fill: #000;
  }

  .fm-chart .bar.color6,
  .fm-chart .point.color6,
  .fm-chart .area.color6 {
    fill: #db843d;
  }

  .fm-chart .lines .line.color6 {
    strok: #db843d;
  }

  .fm-chart .bar.color5,
  .fm-chart .point.color5,
  .fm-chart .area.color5 {
    fill: #3d96ae;
  }

  .fm-chart .lines .line.color5 {
    stroke: #3d96ae;
  }

  .fm-chart .bar.color4,
  .fm-chart .point.color4,
  .fm-chart .area.color4 {
    fill: #80699b;
  }

  .fm-chart .line.color4 {
    stroke: #80699b;
  }

  .fm-chart .bar.color3,
  .fm-chart .point.color3,
  .fm-chart .area.color3 {
    fill: #89a54e;
  }

  .fm-chart .line.color3 {
    stroke: #89a54e;
  }

  .fm-chart .bar.color2,
  .fm-chart .point.color2,
  .fm-chart .area.color2 {
    fill: #aa4643;
  }

  .fm-chart .line.color2 {
    stroke: #aa4643;
  }

  .fm-chart .bar.color1,
  .fm-chart .point.color1,
  .fm-chart .area.color1 {
    fill: #4572a7;
  }

  .fm-chart .line.color1 {
    stroke: #4572a7;
  }

  .fm-chart.bar.vertical .axis.left .stroke,
  .fm-chart.bar.vertical .axis.left .tick,
  .fm-chart.bar.vertical .axis.right .stroke,
  .fm-chart.bar.vertical .axis.right .tick {
    display: none;
  }

  .fm-tooltip {
    text-align: center;
    padding: 5px 7px;
    color: #fff;
    background: #333;
    border-radius: 3px;
    font-size: 13px;
  }
  ]]>
  </style>
  <g class='axis right'>
    <text x='780.000000' y='153.500000' style='text-anchor:middle; dominant-baseline:text-before-edge;' class='title' transform='translate(0,0) rotate(270.000000 780.000000 153.500000)'>Berlin</text>
    <text x='740.000000' y='295.000000' style='text-anchor:start; dominant-baseline:middle;' class='label' >-2.85</text>
    <text x='740.000000' y='254.571429' style='text-anchor:start; dominant-baseline:middle;' class='label' >0.49</text>
    <text x='740.000000' y='214.142857' style='text-anchor:start; dominant-baseline:middle;' class='label' >3.84</text>
    <text x='740.000000' y='173.714286' style='text-anchor:start; dominant-baseline:middle;' class='label' >7.18</text>
    <text x='740.000000' y='133.285714' style='text-anchor:start; dominant-baseline:middle;' class='label' >10.5</text>
    <text x='740.000000' y='92.857143' style='text-anchor:start; dominant-baseline:middle;' class='label' >13.9</text>
    <text x='740.000000' y='52.428571' style='text-anchor:start; dominant-baseline:middle;' class='label' >17.2</text>
    <text x='740.000000' y='12.000000' style='text-anchor:start; dominant-baseline:middle;' class='label' >20.6</text>
    <line x1='730.000000' y1='295.000000' x2='725.000000' y2='295.000000' class='tick' />
    <line x1='730.000000' y1='254.571429' x2='725.000000' y2='254.571429' class='tick' />
    <line x1='730.000000' y1='214.142857' x2='725.000000' y2='214.142857' class='tick' />
    <line x1='730.000000' y1='173.714286' x2='725.000000' y2='173.714286' class='tick' />
    <line x1='730.000000' y1='133.285714' x2='725.000000' y2='133.285714' class='tick' />
    <line x1='730.000000' y1='92.857143' x2='725.000000' y2='92.857143' class='tick' />
    <line x1='730.000000' y1='52.428571' x2='725.000000' y2='52.428571' class='tick' />
    <line x1='730.000000' y1='12.000000' x2='725.000000' y2='12.000000' class='tick' />
    <line x1='730.000000' y1='12.000000' x2='730.000000' y2='295.000000' class='stroke' />
  </g>
  <g class='axis bottom'>
    <text x='702.500000' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >Dec</text>
    <text x='647.500000' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >Nov</text>
    <text x='592.500000' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >Oct</text>
    <text x='537.500000' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >Sep</text>
    <text x='482.500000' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >Aug</text>
    <text x='427.500000' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >Jul</text>
    <text x='372.500000' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >Jun</text>
    <text x='317.500000' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >May</text>
    <text x='262.500000' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >Apr</text>
    <text x='207.500000' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >Mar</text>
    <text x='152.500000' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >Feb</text>
    <text x='97.500000' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >Jan</text>
    <line x1='70.000000' y1='295.000000' x2='70.000000' y2='290.000000' class='tick' />
    <line x1='730.000000' y1='295.000000' x2='730.000000' y2='290.000000' class='tick' />
    <line x1='675.000000' y1='295.000000' x2='675.000000' y2='290.000000' class='tick' />
    <line x1='620.000000' y1='295.000000' x2='620.000000' y2='290.000000' class='tick' />
    <line x1='565.000000' y1='295.000000' x2='565.000000' y2='290.000000' class='tick' />
    <line x1='510.000000' y1='295.000000' x2='510.000000' y2='290.000000' class='tick' />
    <line x1='455.000000' y1='295.000000' x2='455.000000' y2='290.000000' class='tick' />
    <line x1='400.000000' y1='295.000000' x2='400.000000' y2='290.000000' class='tick' />
    <line x1='345.000000' y1='295.000000' x2='345.000000' y2='290.000000' class='tick' />
    <line x1='290.000000' y1='295.000000' x2='290.000000' y2='290.000000' class='tick' />
    <line x1='235.000000' y1='295.000000' x2='235.000000' y2='290.000000' class='tick' />
    <line x1='180.000000' y1='295.000000' x2='180.000000' y2='290.000000' class='tick' />
    <line x1='125.000000' y1='295.000000' x2='125.000000' y2='290.000000' class='tick' />
    <line x1='70.000000' y1='295.000000' x2='730.000000' y2='295.000000' class='stroke' />
  </g>
  <g class='axis left'>
    <text x='0.000000' y='153.500000' style='text-anchor:middle; dominant-baseline:text-before-edge;' class='title' transform='translate(0,0) rotate(270.000000 0.000000 153.500000)'>New York</text>
    <text x='60.000000' y='295.000000' style='text-anchor:end; dominant-baseline:middle;' class='label' >-2.70</text>
    <text x='60.000000' y='254.571429' style='text-anchor:end; dominant-baseline:middle;' class='label' >1.59</text>
    <text x='60.000000' y='214.142857' style='text-anchor:end; dominant-baseline:middle;' class='label' >5.87</text>
    <text x='60.000000' y='173.714286' style='text-anchor:end; dominant-baseline:middle;' class='label' >10.2</text>
    <text x='60.000000' y='133.285714' style='text-anchor:end; dominant-baseline:middle;' class='label' >14.4</text>
    <text x='60.000000' y='92.857143' style='text-anchor:end; dominant-baseline:middle;' class='label' >18.7</text>
    <text x='60.000000' y='52.428571' style='text-anchor:end; dominant-baseline:middle;' class='label' >23.0</text>
    <text x='60.000000' y='12.000000' style='text-anchor:end; dominant-baseline:middle;' class='label' >27.3</text>
    <line x1='70.000000' y1='295.000000' x2='75.000000' y2='295.000000' class='tick' />
    <line x1='70.000000' y1='254.571429' x2='75.000000' y2='254.571429' class='tick' />
    <line x1='70.000000' y1='214.142857' x2='75.000000' y2='214.142857' class='tick' />
    <line x1='70.000000' y1='173.714286' x2='75.000000' y2='173.714286' class='tick' />
    <line x1='70.000000' y1='133.285714' x2='75.000000' y2='133.285714' class='tick' />
    <line x1='70.000000' y1='92.857143' x2='75.000000' y2='92.857143' class='tick' />
    <line x1='70.000000' y1='52.428571' x2='75.000000' y2='52.428571' class='tick' />
    <line x1='70.000000' y1='12.000000' x2='75.000000' y2='12.000000' class='tick' />
    <line x1='70.000000' y1='12.000000' x2='70.000000' y2='295.000000' class='stroke' />
  </g>
  <g class='legend'>
    <text x='705.000000' y='22.000000' style='text-anchor:end; dominant-baseline:text-before-edge;' class='title' ></text>
    <circle cx='95.000000' cy='28.000000' r='3.000000' class='point color1' fm:label='' fm:series='', style=''></circle>
    <text x='103.000000' y='28.000000' style='text-anchor:start; dominant-baseline:central;' class='label' >New York</text>
    <circle cx='163.000000' cy='28.000000' r='3.000000' class='point color2' fm:label='' fm:series='', style=''></circle>
    <text x='171.000000' y='28.000000' style='text-anchor:start; dominant-baseline:central;' class='label' >Berlin</text>
  </g>
  <g class='lines'>
    <circle cx='702.500000' cy='245.946667' r='3.000000' class='point color1' fm:label='Dec: 2.500000' fm:series='New York', style=''></circle>
    <circle cx='647.500000' cy='188.403333' r='3.000000' class='point color1' fm:label='Nov: 8.600000' fm:series='New York', style=''></circle>
    <circle cx='592.500000' cy='136.520000' r='3.000000' class='point color1' fm:label='Oct: 14.100000' fm:series='New York', style=''></circle>
    <circle cx='537.500000' cy='79.920000' r='3.000000' class='point color1' fm:label='Sep: 20.100000' fm:series='New York', style=''></circle>
    <circle cx='482.500000' cy='42.186667' r='3.000000' class='point color1' fm:label='Aug: 24.100000' fm:series='New York', style=''></circle>
    <circle cx='427.500000' cy='35.583333' r='3.000000' class='point color1' fm:label='Jul: 24.800000' fm:series='New York', style=''></circle>
    <circle cx='372.500000' cy='61.996667' r='3.000000' class='point color1' fm:label='Jun: 22.000000' fm:series='New York', style=''></circle>
    <circle cx='317.500000' cy='109.163333' r='3.000000' class='point color1' fm:label='May: 17.000000' fm:series='New York', style=''></circle>
    <circle cx='262.500000' cy='162.933333' r='3.000000' class='point color1' fm:label='Apr: 11.300000' fm:series='New York', style=''></circle>
    <circle cx='207.500000' cy='215.760000' r='3.000000' class='point color1' fm:label='Mar: 5.700000' fm:series='New York', style=''></circle>
    <circle cx='152.500000' cy='261.983333' r='3.000000' class='point color1' fm:label='Feb: 0.800000' fm:series='New York', style=''></circle>
    <circle cx='97.500000' cy='271.416667' r='3.000000' class='point color1' fm:label='Jan: -0.200000' fm:series='New York', style=''></circle>
    <path stroke-width='2.000000' class='line color1' style='' d='M702.500000 245.946667 L647.500000 188.403333 L592.500000 136.520000 L537.500000 79.920000 L482.500000 42.186667 L427.500000 35.583333 L372.500000 61.996667 L317.500000 109.163333 L262.500000 162.933333 L207.500000 215.760000 L152.500000 261.983333 L97.500000 271.416667 ' />
  </g>
  <g class='lines'>
    <circle cx='702.500000' cy='271.416667' r='3.000000' class='point color2' fm:label='Jan: -0.900000' fm:series='Berlin', style=''></circle>
    <circle cx='647.500000' cy='253.275641' r='3.000000' class='point color2' fm:label='Feb: 0.600000' fm:series='Berlin', style=''></circle>
    <circle cx='592.500000' cy='218.202991' r='3.000000' class='point color2' fm:label='Mar: 3.500000' fm:series='Berlin', style=''></circle>
    <circle cx='537.500000' cy='158.942308' r='3.000000' class='point color2' fm:label='Apr: 8.400000' fm:series='Berlin', style=''></circle>
    <circle cx='482.500000' cy='97.262821' r='3.000000' class='point color2' fm:label='May: 13.500000' fm:series='Berlin', style=''></circle>
    <circle cx='427.500000' cy='54.933761' r='3.000000' class='point color2' fm:label='Jun: 17.000000' fm:series='Berlin', style=''></circle>
    <circle cx='372.500000' cy='35.583333' r='3.000000' class='point color2' fm:label='Jul: 18.600000' fm:series='Berlin', style=''></circle>
    <circle cx='317.500000' cy='44.049145' r='3.000000' class='point color2' fm:label='Aug: 17.900000' fm:series='Berlin', style=''></circle>
    <circle cx='262.500000' cy='87.587607' r='3.000000' class='point color2' fm:label='Sep: 14.300000' fm:series='Berlin', style=''></circle>
    <circle cx='207.500000' cy='151.685897' r='3.000000' class='point color2' fm:label='Oct: 9.000000' fm:series='Berlin', style=''></circle>
    <circle cx='152.500000' cy='213.365385' r='3.000000' class='point color2' fm:label='Nov: 3.900000' fm:series='Berlin', style=''></circle>
    <circle cx='97.500000' cy='248.438034' r='3.000000' class='point color2' fm:label='Dec: 1.000000' fm:series='Berlin', style=''></circle>
    <path stroke-width='2.000000' class='line color2' style='' d='M702.500000 271.416667 L647.500000 253.275641 L592.500000 218.202991 L537.500000 158.942308 L482.500000 97.262821 L427.500000 54.933761 L372.500000 35.583333 L317.500000 44.049145 L262.500000 87.587607 L207.500000 151.685897 L152.500000 213.365385 L97.500000 248.438034 ' />
  </g>
</svg>
